<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-09 16:02:21
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-14 17:49:27
 * @FilePath: /shortRent-ui/src/views/system/credit/packageDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <CustomContent>
      <template v-slot:body>
        <div>
          <!-- 基础信息 -->
          <el-row>
            <el-col :span="24">
              <MmvTitle title="基础信息"></MmvTitle>
            </el-col>
          </el-row>

          <el-descriptions>
            <el-descriptions-item label="征信包名称">{{ detail.name }}</el-descriptions-item>
            <el-descriptions-item label="单价">{{ detail.price }} 元/次</el-descriptions-item>
            <el-descriptions-item label="征信包类型">{{ detail.type == 1 ? '企业' : '个人' }}</el-descriptions-item>
            <el-descriptions-item label="介绍">
              {{ detail.remark }}
            </el-descriptions-item>
          </el-descriptions>

          <template v-if="currentList1.length > 0">
            <div class="subTitle">个人-基础核验</div>
            <el-row :gutter="20">
              <el-col :span="24">
                <div>
                  <el-tag class="tag" v-for="(id) in currentList1" :key="id">{{ id | creditOption }}</el-tag>
                </div>
              </el-col>
            </el-row>
          </template>

          <template v-if="currentList2.length > 0">
            <div class="subTitle">个人-企业背景</div>
            <el-row :gutter="20">
              <el-col :span="24">
                <div>
                  <el-tag class="tag" v-for="(id) in currentList2" :key="id">{{ id | creditOption }}</el-tag>
                </div>
              </el-col>
            </el-row>
          </template>

          <template v-if="currentList3.length > 0">
            <div class="subTitle">个人-反欺诈</div>
            <el-row :gutter="20">
              <el-col :span="24">
                <div>
                  <el-tag class="tag" v-for="(id) in currentList3" :key="id">{{ id | creditOption }}</el-tag>
                </div>
              </el-col>
            </el-row>
          </template>

          <template v-if="currentList4.length > 0">
            <div class="subTitle">个人-收入能力</div>
            <el-row :gutter="20">
              <el-col :span="24">
                <div>
                  <el-tag class="tag" v-for="(id) in currentList4" :key="id">{{ id | creditOption }}</el-tag>
                </div>
              </el-col>
            </el-row>
          </template>

          <template v-if="currentCompanyList1.length > 0">
            <div class="subTitle">企业-基础核验</div>
            <el-row :gutter="20">
              <el-col :span="24">
                <div>
                  <el-tag class="tag" v-for="(id) in currentCompanyList1" :key="id">{{ id | creditOption }}</el-tag>
                </div>
              </el-col>
            </el-row>
          </template>

          <template v-if="currentCompanyList2.length > 0">
            <div class="subTitle">企业-风险审查</div>
            <el-row :gutter="20">
              <el-col :span="24">
                <div>
                  <el-tag class="tag" v-for="(id) in currentCompanyList2" :key="id">{{ id | creditOption }}</el-tag>
                </div>
              </el-col>
            </el-row>
          </template>


          <!-- 租户信息 -->
          <el-row style="margin-top: 20px;">
            <el-col :span="24">
              <MmvTitle title="租户信息"></MmvTitle>
            </el-col>
          </el-row>

          <div>
            <el-table v-loading="loading" :data="detail.tenantList" stripe
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border>
              <template slot="empty">
                <el-empty :image-size="50" description="该征信包暂无租户使用"></el-empty>
              </template>
              <el-table-column label="租户名称" align="center" prop="tenantName" />
              <el-table-column label="联系人" align="center" prop="tenantConcat" />
              <el-table-column label="电话" align="center" prop="tenantPhone" />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
                <template slot-scope="scope">
                  <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>


        </div>
      </template>
      <!-- 底部提交按钮 -->
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">返回</el-button>
        </div>
      </template>

    </CustomContent>
  </div>
</template>
<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import CustomContent from '@/components/custom/content.vue'
import * as creditApi from '@/api/credit/credit';
export default {
  name: 'packageDetail',
  components: {
    MmvTitle,
    CustomContent,
  },
  data() {
    return {
      id: this.$route.params.id,
      // id: this.$route.query.id,
      detail: {},
      currentList1: [],
      currentList2: [],
      currentList3: [],
      currentList4: [],
      currentCompanyList1: [],
      currentCompanyList2: [],
      // 加载标识
      loading: false,

    }
  },
  created() {
    this.getPackageDetail();
  },
  methods: {
    // 获取征信包详情
    getPackageDetail() {
      this.loading = true;
      creditApi.creditDetail(this.id).then(res => {
        this.loading = false;
        this.detail = res.data;
        if (this.detail.selectQueryIds.length > 0) {
          this.detail.selectQueryIds.forEach(id => {
            if (this.detail.type == 2) {//个人
              if (id >= 1 && id <= 5) {//个-人基础核验
                this.currentList1.push(id);
              } else if (id == 6) {//个人-企业背景
                this.currentList2.push(id);
              } else if (id >= 7 && id <= 11) {//个人-反欺诈
                this.currentList3.push(id);
              } else if (id == 12) {//个人-收入能力
                this.currentList4.push(id);
              }
            } else if (this.detail.type == 1) {//企业
              if (id == 13) {//企业-基础核验
                this.currentCompanyList1.push(id);
              } else if (id >= 14 && id <= 22) {//企业-风险审查
                this.currentCompanyList2.push(id);
              }
            }
          })
        }
      })
    },

    // 删除征信包下的指定租户
    handleDelete(item) {
      this.$confirm(`'确定删除征信包下[${item.tenantName}]租户吗?'`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        creditApi.deleteCreditTenant(this.id, item.tenantId).then(res => {
          if (res.code == 200) {
            this.getPackageDetail();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        })
      })
    },
    close() {
      this.$router.back();
    }
  },
}
</script>
<style lang="scss" scoped>
.subTitle {
  color: #333;
  font-size: 15px;
  font-weight: bold;
  margin: 15px 0;

  // &::before {
  //   position: relative;
  //   top: 4px;
  //   display: inline-block;
  //   margin-right: 5px;
  //   content: '';
  //   width: 5px;
  //   height: 20px;
  //   background: #08e443;
  // }
}

.tag {
  margin-right: 15px;
}
</style>